<!--
 * @FilePath: Index.vue
 * @Author: jack
 * @Date: 2024-05-14 17:06:19
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-18 09:08:26
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div>
        <el-row style="margin-top: 20px">
            <el-button type="primary" class="shadow-bg-btn" @click="Add">添加数据</el-button>
            <el-button type="primary" class="white-bg-btn" plain @click="deleteAll">批量删除</el-button>
        </el-row>
        <el-row>
            <div class="listBox">
                <div class="listItem" v-for="(item, index) in props.currentItem.content" :key="item.id">
                    <div class="imageFlex">
                        <el-image v-if="Number(item.type) == 1" @click="previewImage(item)" :src="picture" fit="cover"
                            :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="srcList"
                            :initial-index="4"></el-image>
                        <el-image @click="showItem(item)" v-else :src="Number(item.type) == 2 ? video : link"
                            fit="cover"></el-image>
                        <div class="sign">{{ Number(item.type) == 1 ? '图片' : Number(item.type) == 2 ? '视频' : '链接' }}
                        </div>
                    </div>
                    <SvgIcon size="20px" @click.stop="selectClick(item)" :color="item.isSelect ? '#2C68FF' : '#C5C5C5'"
                        :icon-class="item.isSelect ? 'icon-icon_yixuan' : 'icon-icon_weixuan'">
                    </SvgIcon>
                    <div class="titleConfig">
                        <div>{{ item.name }}</div>
                        <div>
                            <el-dropdown @command="handleCommand">
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item icon="EditPen"
                                            :command="beforeHandleCommand(index, item.id, 'Edit')">编辑</el-dropdown-item>
                                        <el-dropdown-item icon="Delete"
                                            :command="beforeHandleCommand(index, item.id, 'Del')">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
            </div>
        </el-row>
        <!-- 添加/编辑大屏弹窗 -->
        <EditModule :modelShow="modelShow" :dataList="props.currentItem.content" @changeData="changeData"
            :editIndex="editIndex" :typeId="props.typeId" @getList="getList" @setConfig="setConfig"
            @CancelModule="CancelModule">
        </EditModule>
        <!-- 视频预览 -->
        <div class="videoPriew" v-if="showViewer">
            <div class="videoContent">
                <video class="videoBox" controls autoplay :disablePictureInPicture="true" :src="videoUrl">
                </video>
                <div class="closeBox" @click="showViewer = false">关闭</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, h, watch } from 'vue'
import EditModule from './EditModule.vue'
import { getScreenSettingList, materialSetting, operateScreenSetting } from '../../Api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import picture from '@/assets/images/picture.png'
import video from '@/assets/images/video.png'
import link from '@/assets/images/link.png'
import $util from '../../../util/util'
interface PropsType {
    currentItem?: any
    typeId?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    currentItem: {},
    typeId: ''
})
const emit = defineEmits<EmitType>()
interface EmitType {
    (e: 'getConfig', isNeedSet: boolean): void
}
// 查看视频
const showViewer = ref<boolean>(false)
const videoUrl = ref<string>('')
const showItem = async (item: any) => {
    if (Number(item.type) == 2) {
        showViewer.value = true
        videoUrl.value = item.local_video_show
    } else {
        window.open(item.link, '_blank');
    }
}
const dataList = ref<any>([])
// 获取所有大屏数据类目配置
const configlist = ref<any>([])
const getScreenConfig = async () => {
    const res: any = await getScreenSettingList({ type_id: props.typeId })
    if (res.code !== 1) return ElMessage.error(res.message)
    if (res.data.length > 0) {
        configlist.value = res.data[0].content
    }
}
// 初始化数据
// const getInnit = async () => {
//     if (props.currentItem.content && props.currentItem.content.length > 0) {
//         dataList.value = JSON.parse(JSON.stringify(props.currentItem.content))
//     }
// }
watch(
    () => props.typeId,
    async (newValue, oldValue) => {
        // await getInnit()
        await getScreenConfig()
    },
    { deep: true, immediate: true, }
)
// 点击预览图片
const srcList = ref<any>([])
const previewImage = (item: any) => {
    srcList.value = item.local_pic_show
}
const changeData = (item: any) => {
    props.currentItem.content[editIndex.value] = item
}
const beforeHandleCommand = (index: number, id: any, command: any) => {
    return {
        'index': index,
        'command': command,
        'id': id
    }
}
// 存储选择删除的数据
const delIds = ref<any>([])
// 编辑的序号
const editIndex = ref<number>(-1)
const handleCommand = (item: any) => {
    if (item.command === 'Edit') {
        // 编辑
        editIndex.value = item.index
        modelShow.value = true
    } else if (item.command === 'Del') {
        // 删除
        delIds.value = []
        ElMessageBox({
            title: '温馨提示',
            message: h('p', { style: 'font-weight:bold;font-size: 15px;color: #333333;' }, [
                h('span', null, '您确定要删除该数据吗？'),
                h('p', { style: 'font-size: 14px;font-weight:normal;color: rgba(0,0,0,0.65);margin-top:10px;' }, '删除后将无法恢复，确定要继续吗?'),
            ]),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            beforeClose: async (action, instance, done) => {
                if (action === 'confirm') {
                    delIds.value.push(item.id)
                    submitFrom()
                    done()
                } else {
                    done()
                }
            },
        }).then((action) => {
        })
    }
}
// 批量删除
const selectClick = (item: any) => {
    item.isSelect = !item.isSelect
}
const deleteAll = async () => {
    delIds.value = []
    props.currentItem.content.forEach((item: any, index: number) => {
        if (item.isSelect) {
            delIds.value.push(item.id)
        }
    })
    if (delIds.value.length === 0) return ElMessage.error('请选择您需要删除的数据!')
    // 删除
    ElMessageBox({
        title: '温馨提示',
        message: h('p', { style: 'font-weight:bold;font-size: 15px;color: #333333;' }, [
            h('span', null, '您确定要删除您选择的数据'),
            h('p', { style: 'font-size: 14px;font-weight:normal;color: rgba(0,0,0,0.65);margin-top:10px;' }, '删除后将无法恢复，确定要继续吗?'),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: async (action, instance, done) => {
            if (action === 'confirm') {
                submitFrom()
                done()
            } else {
                done()
            }
        },
    }).then((action) => {
    })
}
// 添加大屏
const modelShow = ref<boolean>(false)
const Add = () => {
    editIndex.value = -1
    modelShow.value = true
}
const CancelModule = () => {
    editIndex.value = -1
    modelShow.value = false
}
// 添加数据
const submitFrom = async () => {
    let arr = [...props.currentItem.content]
    delIds.value.forEach((items: any) => {
        let index = arr.findIndex((item: any) => items === item.id);
        arr.splice(index, 1)
    })
    console.log(arr, props.currentItem.content)
    const res: any = await materialSetting({ type_id: props.typeId, content: arr })
    if (res.code !== 1) return ElMessage.error(res.message)
    // 修改成功之后提交大屏配置修改接口
    setConfig()
    ElMessage.success(res.message)
    emit('getConfig', true)
}
// 大屏配置修改接口
const setConfig = async () => {
    //  先对修改的数据作比较
    const params = {
        type_id: props.typeId,
        content: $util.updateData(props.currentItem.content, configlist.value)
    }
    const res: any = await operateScreenSetting(params)
    if (res.code !== 1) return ElMessage.error(res.message)
    getScreenConfig()
}
const refreshChild = async () => {
    emit('getConfig', false)
}
const getList = async () => {
    emit('getConfig', true)
}
onMounted(() => {
})
defineExpose({ submitFrom, refreshChild, setConfig })
</script>
<style lang="scss" scoped>
.listBox {
    height: calc(100vh - 375px);
    overflow-y: scroll;
    margin-top: 20px;

    .listItem {
        margin: 0 20px 20px 0;
        width: 260px;
        height: 195px;
        background: #F8F8F8;
        border-radius: 6px;
        display: inline-block;
        padding: 25px 25px 0 25px;
        box-sizing: border-box;
        cursor: pointer;
        position: relative;

        .imageFlex {
            width: 100%;
            height: 118px;
            border-radius: 6px;
            display: inline-block;
            position: relative;

            .el-image {
                width: 100%;
                height: 100%;
                border-radius: 6px;
                display: inline-block;
            }

            .sign {
                width: 58px;
                height: 24px;
                line-height: 24px;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 6px 0px 6px 0px;
                font-size: 14px;
                color: #FFFFFF;
                text-align: center;
                position: absolute;
                top: 0px;
                left: 0px;
            }
        }

        .icon {
            position: absolute;
            right: 10px;
            top: 5px;
        }

        .titleConfig {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 50px;
            color: #333333;
        }
    }
}

.videoPriew {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    height: 100%;
    background-color: var(--el-overlay-color-lighter);
    overflow: auto;

    .videoContent {
        width: 50%;
        // height: 60%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .videoBox {
            width: 100%;
        }

        .closeBox {
            width: 100px;
            color: #ffffff;
            margin: 20px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-size: 18px;
            padding: 10px 15px;
            border-radius: 33px;
            border: 1px solid #FFFFFF;
            cursor: pointer;
        }
    }

}
</style>